---
title: "Accessibility Checker Rule Help: WCAG21_Style_Viewport"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Check that text sized using viewport units can be resized up to 200%

<div id="locLevel"></div>

The text must scale up to 200% without loss of content or functionality

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

To support people with low vision, any visually rendered text must scale up to 200% of the default content size, without loss of content or functionality and without requiring scrolling in two dimensions. When viewport units are applied to text (generally via font-size in CSS), they are relative to the viewport and this does not allow for text resize by browser zooming or adjusting text-size.

<div id="locSnippet"></div>

### What to do

* Implement any of the sufficient techniques of the related WCAG requirement using font size units or technology that can scale up to 200% without loss of content or functionality, and without requiring scrolling in two dimensions.

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 1.4.4 Resize Text](https://www.ibm.com/able/requirements/requirements/#1_4_4)
[IBM 1.4.10 Reflow](https://www.ibm.com/able/requirements/requirements/#1_4_10)
[WCAG 2.1 failure technique F94](https://www.w3.org/WAI/WCAG21/Techniques/failures/F94)

### Who does this affect?

* People with low vision using screen magnification

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
